<template>
  <div class="kpdetail">
    <div>
      <div style="color: #666; margin-bottom: 10px">基础信息</div>
      <div style="font-weight: 600">{{ lnvoicing_dateil.order_status }}</div>
      <div class="kpdetail-info">
        <div>
          任务状态：<span>{{
            lnvoicing_dateil.status == 1
              ? "已完成"
              : lnvoicing_dateil.status == 0
              ? "待处理"
              : lnvoicing_dateil.status == 2
              ? "处理中"
              : lnvoicing_dateil.status == 3
              ? "暂停中"
              : ""
          }}</span>
        </div>
        <div>
          是否需要开票：<span>{{
            lnvoicing_dateil.hongchong_status == 1
              ? "无需开票"
              : lnvoicing_dateil.hongchong_status == 2
              ? "需开票"
              : ""
          }}</span>
        </div>
        <div>
          后台发票状态：<span>{{
            lnvoicing_dateil.invoicing_status == 1
              ? "已开票"
              : lnvoicing_dateil.invoicing_status == 2
              ? "开票失败"
              : lnvoicing_dateil.invoicing_status == 3
              ? "申请冲红"
              : lnvoicing_dateil.invoicing_status == 4
              ? "冲红成功"
              : lnvoicing_dateil.invoicing_status == 5
              ? "冲红失败"
              : lnvoicing_dateil.invoicing_status == 0
              ? "未开票"
              : ""
          }}</span>
        </div>
        <div>
          抬头：<span>{{ lnvoicing_dateil.invoice_header || "--" }}</span>
        </div>
        <div>
          税号：<span>{{ lnvoicing_dateil.invoicing_number || "--" }}</span>
        </div>
        <div>
          地址：<span>{{ lnvoicing_dateil.opening_bank_address || "--" }}</span>
        </div>
        <div>
          开户行：<span>{{ lnvoicing_dateil.opening_bank || "--" }}</span>
        </div>
        <div>
          开户账号：<span>{{
            lnvoicing_dateil.opening_bank_number || "--"
          }}</span>
        </div>
        <div>
          电子邮箱：<span>{{ lnvoicing_dateil.email || "--" }}</span>
        </div>
        <div>
          店铺：<span>{{ lnvoicing_dateil.sellerid | shopfilters() }}</span>
        </div>
        <div>
          订单号：<span>{{ lnvoicing_dateil.sourceid || "--" }}</span>
        </div>
        <div>
          买家昵称：<span>{{ lnvoicing_dateil.buyername || "--" }}</span>
        </div>
        <div>
          创建人：<span>{{ lnvoicing_dateil.adduserid || "--" }}</span>
        </div>
        <div>
          执行人：<span>{{ lnvoicing_dateil.douserid || "--" }}</span>
        </div>
        <div>
          创建时间：<span>{{ lnvoicing_dateil.addtime || "--" }}</span>
        </div>
        <div>
          客服备注：<span>{{ lnvoicing_dateil.notes || "--" }}</span>
        </div>
      </div>
      <div style="color: #666; margin: 10px 0">开票商品：</div>
      <el-table border :data="lnvoicing_dateil.order_detail" size="mini">
        <el-table-column
          label="子订单号"
          align="center"
          width="180"
          prop="son_order_no"
        >
        </el-table-column>
        <el-table-column label="商品标题" align="center" prop="product_name">
        </el-table-column>
        <el-table-column label="购买数量" align="center" prop="num">
        </el-table-column>
        <el-table-column
          label="子订单号实付金额"
          align="center"
          prop="pay_amount"
        >
        </el-table-column>
        <el-table-column label="货品编号" align="center" prop="sku_code">
        </el-table-column>
      </el-table>
    </div>
    <div>
      <div style="color: #666; margin:20px 0 10px 0">开票信息历史</div>
      <el-table border :data="lnvoicing_list" size="mini">
        <el-table-column
          label="发票信息更新时间"
          align="center"
          width="180"
          prop="createtime"
        >
        </el-table-column>
        <el-table-column
          label="类型"
          align="center"
          prop="type"
          width="80"
        >
          <template slot-scope="{ row }">
            {{ row.type == 1 ? "开票" : "冲红" }}
          </template>
        </el-table-column>
        <el-table-column label="操作人" align="center" prop="operator_user">
        </el-table-column>
        <el-table-column
          label="发票类型"
          align="center"
          prop="invoice_headerid"
          width="80"
        >
          <template slot-scope="{ row }">
            {{ row.invoice_headerid == 900 ? "个人" : "公司" }}
          </template>
        </el-table-column>
        <el-table-column
          label="发票"
          align="center"
          prop="c_url"
          width="80"
        >
          <template slot-scope="{ row }">
           <el-link type="primary" :href="row.c_url" target="_blank" v-if="row.c_url">点击查看</el-link>
          </template>
        </el-table-column>
        <el-table-column label="开票信息" align="center">
          <el-table-column label="抬头/税号" align="center" width="250">
            <template slot-scope="{ row }">
              {{ row.invoice_header || "--" }} /
              {{ row.invoicing_number || "--" }}
            </template>
          </el-table-column>
          <el-table-column label="地址/电话" align="center" width="250">
            <template slot-scope="{ row }">
              {{ row.opening_bank_address || "--" }} /
              {{ row.opening_bank_tel || "--" }}
            </template>
          </el-table-column>
          <el-table-column label="开户行/账号" align="center" width="250">
            <template slot-scope="{ row }">
              {{ row.opening_bank || "--" }} /
              {{ row.opening_bank_number || "--" }}
            </template>
          </el-table-column>
          <el-table-column
            label="客服备注"
            align="center"
            prop="notes"
            width="100"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column label="邮箱" align="center" prop="email">
        </el-table-column>
        <el-table-column label="开票商品" align="center" width="1000">
          <template slot-scope="{ row }">
            <el-table border :data="row.order_detail" size="mini">
              <el-table-column
                label="子订单号"
                align="center"
                width="180"
                prop="son_order_no"
              >
              </el-table-column>
              <el-table-column
                label="商品标题"
                align="center"
                prop="product_name"
              >
              </el-table-column>
              <el-table-column label="购买数量" align="center" prop="num">
              </el-table-column>
              <el-table-column
                label="子订单号实付金额"
                align="center"
                prop="pay_amount"
              >
              </el-table-column>
              <el-table-column label="货品编号" align="center" prop="sku_code">
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {
  postAdmingetInvoiceDetail,
  postAdminBanNiuGetInvoiceShop,
} from "@/api";
let that;
export default {
  filters: {
    shopfilters(val) {
      let shoplist = that.shoplist || [];
      let index = shoplist.map((item) => item.sellerid).indexOf(val);
      return shoplist[index].sellertitle;
    },
  },
  data() {
    return {
      sourceid: "",
      lnvoicing_dateil: "",
      lnvoicing_list: "",
      shoplist: [],
    };
  },
  beforeCreate() {
    that = this;
  },
  async mounted() {
    let sourceid = this.$route.query.sourceid;
    console.log(sourceid);
    this.sourceid = sourceid;
    await this.postAdminBanNiuGetInvoiceShop();
    let res = await postAdmingetInvoiceDetail({ sourceid });
    let data = res.data;
    this.lnvoicing_dateil = data.lnvoicing_dateil;
    this.lnvoicing_list = data.lnvoicing_list;
  },

  // async mounted() {
  //   let sourceid = this.$route.query.sourceid;
  //   console.log(sourceid);
  //   this.sourceid = sourceid;
  //   await this.postAdminBanNiuGetInvoiceShop();
  //   let res = await postAdmingetInvoiceDetail({ sourceid });
  //   let data = res.data;
  //   this.lnvoicing_dateil = data.lnvoicing_dateil;
  //   this.lnvoicing_list = data.lnvoicing_list;
  // },
  methods: {
    // 店铺列表
    async postAdminBanNiuGetInvoiceShop() {
      let res = await postAdminBanNiuGetInvoiceShop();
      console.log("店铺名字---》", res);
      this.shoplist = res.data;
    },
  },
};
</script>

<style lang='scss'>
.kpdetail {
  padding: 10px;
  background: #fff;
  .kpdetail-info {
    display: flex;
    flex-wrap: wrap;
    > div {
      min-width: 400px;
      max-width: 1000px;
      margin-top: 6px;
      font-size: 14px;
    }
  }
}
</style>